<template>
    <div class="app-container">
        <div class="customContainer ">
            <!-- 搜索头 -->
            <el-form :inline="true" :model="formInline" class="demo-form-inline" size="small">
                <el-form-item>
                    <el-checkbox true-label="1" false-label="0" v-model="formInline.look_del" @change="lookDelChange"
                        border>
                        查看已删门店
                    </el-checkbox>
                </el-form-item>
                <el-form-item>
                    <el-date-picker v-model="pickerDate" value-format="yyyy.MM.dd" type="month" format="yyyy-MM"
                        placeholder="选择月">
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-select filterable placeholder="选择门店" v-model="formInline.store_id">
                        <el-option v-for="item in storeList" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <dj-button size="small" @search="searchClick" />
                </el-form-item>
                <el-form-item>
                    <el-tooltip class="item" effect="dark" placement="bottom-end">
                        <div slot="content" style="line-height:20px;width:400px">
                            <br> 时间:查询的日期，日周期为今日6点至次日6点，月份周期为上一次盘点日期至本次盘点日期
                            <br> 上月库存金额（元）:上个月的实际库存数所价值的价格，公式=∑（库存数*礼品成本价）；库存数为盘点后的实际库存数
                            <br> 本月进货金额（元）:公式=采购单（已入库）金额+其他店调入（已入库）金额+杂项入库（已入库）金额
                            <br> 本月出货金额（元）:公式=店外调出单（对方已入库）金额+礼品机出货金额+店内其他渠道出售礼品金额
                            <br> 本月盘盈金额（元）:公式=∑（盘盈数*礼品成本）
                            <br> 本月盘亏金额（元）:公式=∑（盘亏数*礼品成本）
                            <br> 本月损益金额（元）:该时间段内，本月损益金额=本月库存金额（礼品成本价*库存数）+本月出货金额+本月盘亏金额—本月进货金额—本月盘盈金额—上月存货金额
                            <br> 本月库存金额（元）:公式=∑（库存数*礼品成本价）
                        </div>
                        <i class="el-icon-question"></i>
                    </el-tooltip>
                </el-form-item>
            </el-form>
            <!-- 表格 -->
            <el-table highlight-current-row sum-text="合计" :data="list" v-loading.body="listLoading" border size="mini">
                <el-table-column align="center" label="时间" prop="time"></el-table-column>
                <el-table-column align="center" label="门店名称" prop="store_name"></el-table-column>
                <el-table-column align="center" label="上月存货金额（元）">
                    <template slot-scope="scope">
                        {{scope.row.last_money|keepTwoNum}}
                    </template>
                </el-table-column>
                <el-table-column align="center" label="本月进货金额（元）">
                    <template slot-scope="scope">
                        {{scope.row.in_money|keepTwoNum}}
                    </template>
                </el-table-column>
                <el-table-column align="center" label="本月出货金额（元）">
                    <template slot-scope="scope">
                        {{scope.row.out_money|keepTwoNum}}
                    </template>
                </el-table-column>
                <el-table-column align="center" label="本月盘盈金额（元）">
                    <template slot-scope="scope">
                        {{scope.row.profit|keepTwoNum}}
                    </template>
                </el-table-column>
                <el-table-column align="center" label="本月盘亏金额（元）">
                    <template slot-scope="scope">
                        {{scope.row.loss|keepTwoNum}}
                    </template>
                </el-table-column>
                <el-table-column align="center" label="本月损益金额（元）">
                    <template slot-scope="scope">
                        {{scope.row.premium|keepTwoNum}}
                    </template>
                </el-table-column>
                <el-table-column align="center" label="本月库存金额（元）">
                    <template slot-scope="scope">
                        {{scope.row.month_money|keepTwoNum}}
                    </template>
                </el-table-column>
                <el-table-column align="center" label="本月退货总金额（元）">
                    <template slot-scope="scope">
                        {{scope.row.return_money|keepTwoNum}}
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>
<script>
    import {
        getList,
        getStoreList,
    } from "@/api/storage_control/giftMonth_form";
    export default {
        data() {
            return {
                list: [],
                total: null,
                listLoading: false,
                storeList: null,
                formInline: {
                    store_id: '',
                    time: '',
                    look_del: '0'
                },
                pickerDate: new Date(Date.UTC(new Date().getFullYear(), new Date().getMonth())).toISOString().slice(0, 10).replace('-', '.').replace('-', '.')
            }
        },
        beforeRouteEnter(to, from, next) {
            next((vm) => {
                if (!vm.storeList) {
                    vm.getStore();
                }
            })
        },
        methods: {
            lookDelChange() {
                this.getStore();
            },
            // 获取门店
            getStore() {
                getStoreList({ look_del: this.formInline.look_del, category_id: 103 }).then(response => {
                    this.storeList = response;
                    let data = response.filter(res => 
                        res.id == this.$store.getters.optionId
                    )
                    if(data.length>0){
                        this.formInline.store_id = data[0].id;
                    }
                    this.searchClick();
                });
            },
            // 搜索
            searchClick() {
                this.formInline.time = this.pickerDate.substring(0, this.pickerDate.length - 3);
                this.fetchData();
            },
            // 列表获取
            fetchData() {
                this.listLoading = true;
                getList(this.formInline).then(response => {
                    this.list = response
                    this.listLoading = false;
                }).catch(res=>{
                    this.listLoading=false;
                })
            },
        }
    }
</script>